<template>
    <div>
        <!-- 结清证明开具查询页面 -->
        <div class="settlementCertificate" v-if="show1">
            <el-form  inline label-width="100px" label-position="left">
                <el-row>
                  <el-form-item  label="借据号：">
                    <el-input  v-model="objForm.loanNo"  placeholder=""></el-input>
                  </el-form-item>
                  <el-form-item  label="客户姓名：">
                    <el-input  v-model="objForm.cust_name"  placeholder=""></el-input>
                  </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item  label="状态：">
                        <el-select v-model="objForm.zt" placeholder="请选择状态" style="width: 100%;">
                            <el-option
                              v-for="item in ztOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                      </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item style="padding-top: 20px;float: left;width: 76px;">
                        <el-button  type="primary"  @click="querySettlementCertificate" size="large">查询</el-button>
                    </el-form-item>
                    <el-form-item style="padding-top: 20px;;width: 76px;float: left;">
                        <el-button  type="primary"  @click="restAll" size="large">重置</el-button>
                    </el-form-item>
                </el-row>

                <el-row>
                    <el-form-item style="padding-top: 20px;;width: 76px;float: left;">
                        <el-button  type="primary"  @click="add" size="large">添加</el-button>
                    </el-form-item>
                </el-row>
              </el-form>
              <el-table
                :data="settlementCertificateData"
                title="结清证明查询列表"
                border
                height="300"
                stripe="true"
                style="width: 100%;" >
                <el-table-column type="selection"  />
                <el-table-column prop="loanNo" label="借据号" width="120" align="center"  />
                <el-table-column prop="cust_name" label="客户名称" width="120" align="center" />
                <el-table-column prop="sjxs" label="收件形式" width="120" align="center" />
                <el-table-column prop="sjrlxdh" label="收件人联系电话" width="120" align="center" />
                <el-table-column prop="sjrdz" label="收件人地址" width="120" align="center" />
                <el-table-column prop="sjryx" label="收件人邮箱" width="120" align="center" />
                <el-table-column prop="sqrq" label="申请日期" width="120" align="center" />
                <el-table-column prop="sqr" label="申请人" width="120" align="center" />
                <el-table-column prop="zt" label="状态" width="120" align="center" />

            </el-table>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40,50]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="float: right;">
            </el-pagination>
        </div>

        <!-- 结清证明办理申请页面 -->
        <div class="settlementCertificateApply"  v-if="show2">
            <span style="color: black;font-size: 25px;font-weight: bold;float: left;">结清证明办理申请详情页面</span>
            <br><br><br><br>
            <span style="color: black;font-size: 20px;padding-top: 0;float: left;">基本信息</span>
            <el-divider/>
            <el-form label-width="140px" label-position="right" :model="objForm_apply" :rules="rules" ref="objForm_apply">
                <el-row :span="20">
                    <el-col :span="10">
                    <el-form-item  label="借据号" prop="loanNo">
                        <el-input style="width: 140px;"  v-model="objForm_apply.loanNo"  placeholder=""></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="10">
                    <el-form-item  label="客户姓名：" prop="cust_name">
                        <el-input style="width: 140px;"  v-model="objForm_apply.cust_name"  placeholder=""></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>

                <el-row :span="20">
                    <el-col :span="10">
                        <el-form-item  label="收件人联系电话：" prop="receiptTel">
                            <el-input  v-model="objForm_apply.receiptTel"  placeholder="" style="width: 140px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                    <el-form-item  label="收件方式：" prop="receiptFrom">
                        <el-select v-model="objForm_apply.receiptFrom" placeholder="" style="width: 140px;">
                            <el-option
                                v-for="item in sjfsOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                </el-row>

                <el-row :span="20">
                    <el-col :span="10">
                    <el-form-item  label="收件人地址：" prop="receiptAddr">
                        <el-input style="width: 140px;"  v-model="objForm_apply.receiptAddr"  placeholder="" type="textarea" :rows="5"></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="10">
                    <el-form-item  label="收件人邮箱：" prop="receiptEmail">
                        <el-input style="width: 140px;"  v-model="objForm_apply.receiptEmail"  placeholder=""></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <br><br><br>
            <span style="color: black;font-size: 20px;padding-top: 0;float: left;">申请信息</span>
            <el-divider />
            <el-form label-width="150px" label-position="right" :model="objForm_apply" :rules="rules" :ref="objForm_apply">
                <el-row :span="20">
                    <el-col :span="10">
                    <el-form-item  label="申请日期" prop="apply_dt">
                        <el-input style="width: 140px;"  v-model="objForm_apply.apply_dt"  placeholder=""></el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="10">
                    <el-form-item  label="申请人：" prop="applyUsr">
                        <el-input style="width: 140px;"  v-model="objForm_apply.applyUsr"  placeholder=""></el-input>
                    </el-form-item>
                    </el-col>
                </el-row>

                <el-row :span="20">
                    <el-col :span="10">
                        <el-form-item  label="备注：" prop="message">
                            <el-input style="width: 140px;"  v-model="objForm_apply.message"  placeholder="" type="textarea" :rows="5"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item style="padding-top: 20px;;width: 76px;float: right;padding-right: 220px;">
                        <el-button    @click="shut" size="large">关闭</el-button>
                    </el-form-item>
                    <el-form-item style="padding-top: 20px;float: right;width: 76px;">
                        <el-button  type="primary"  @click="submit" size="large">提交</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="padding-top: 20px;float: right;width: 76px;">
                        <el-button  type="primary"  @click="save" size="large">保存</el-button>
                    </el-form-item> -->
                </el-row>
            </el-form>






        </div>

    </div>



  </template>

  <script>
    import { issueCMIS210082,queryInfoCMIS10000X } from "@/api/hubeixiaojin/queryInfo"

    export default {
      name: 'settlementCertificate',
      props: ['data'],
      data () {
        return {
            settlementCertificateData:[{'jjh':'12345677','khmc':'drxx'}],
            objForm:{},
            objForm_apply:{
                loanNo:'',
                cust_name:'',
                receiptFrom:'',
                receiptTel:'',
                receiptAddr:'',
                receiptEmail:'',
                applyUsr:'',
                message:'',
                apply_dt:''
            },
            rules:{
                loanNo: [
                    { required: true, message: '请输入借据号',trigger: 'blur' },
                ],
                cust_name: [
                    { required: true, message: '请输入客户姓名',trigger: 'blur' },
                ],
                receiptFrom: [
                    { required: true, message: '请填写收件方式',trigger: 'blur' },
                ],
                receiptTel: [
                    { required: true, message: '请填写收件人联系电话',trigger: 'blur' },
                ],
                receiptAddr: [
                    { required: true, message: '请填写收件人地址',trigger: 'blur' },
                ],
                receiptEmail: [
                    { required: true, message: '请填写收件人邮箱',trigger: 'blur' },
                ],
                applyUsr: [
                    { required: true, message: '请填写申请人',trigger: 'blur' },
                ],
                message: [
                    { required: true, message: '请输入备注',trigger: 'blur' },
                ],
                apply_dt: [
                    { required: true, message: '请选择申请日期',trigger: 'blur' },
                ],

            },
            ztOptions:[{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶 '
            }],

            sjfsOptions:[{
                value: '电子邮件',
                label: '电子邮件'
            }, {
                value: '邮寄原件',
                label: '邮寄原件 '
            }],

            total:0,
            currentPage:1,
            show1:true,
            show2:false

        }
      },



      methods:{


        //结清证明查询
        queryInfo(){
            console.log('开始查询结清证明申请：')
            queryInfoCMIS10000X('1111')
                .then(res => {
                if(res.retCode ==='200'){
                    console.log('测试测试测试')
                    //业务逻辑处理：


                }else{
                    console.log(res.msg)
                    window.globalUiKit.notify("提示", '未查询到结清证明申请信息', "info");
                }

                }).catch(err => {
                    console.log(err);
                });
        },


        //结清证明申请
        add(){
            //隐藏结清证明查询页面，展示申请页面
            this.show1 = false
            this.show2 = true


        },

        //重置清空
        restAll(){
          console.log('重置【结清证明申请】页面数据')
        },



        //切换当前页
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);


        },
        //切换每页条数
        handleSizeChange_Claim1(val){

        },



        //结清证明申请 保存表单（保存后，状态为【待提交】）
        save(){
            console.log('保存结清证明申请表单')



        },
        //结清证明申请 提交表单（提交后，状态为【待办理】）
        submit(){
            console.log('提交结清证明申请表单')
            this.$refs['objForm_apply'].validate((valid) => {
                if (valid) {
                    var params={}
                    params.loanNo = this.objForm_apply.loanNo             //借据号
                    params.cust_name = this.objForm_apply.cust_name       //客户姓名
                    params.apply_dt = this.objForm_apply.apply_dt         //申请日期
                    params.receiptFrom = this.objForm_apply.receiptFrom   //收件形式
                    params.receiptTel = this.objForm_apply.receiptTel     //收件人联系电话
                    params.receiptAddr = this.objForm_apply.receiptAddr   //收件人地址
                    params.receiptEmail = this.objForm_apply.receiptEmail //收件人邮箱
                    params.applyUsr = this.objForm_apply.applyUsr         //申请人
                    params.message = this.objForm_apply.message           //备注

                    issueCMIS210082(params)
                        .then(res => {
                            console.log(res)
                            if(res.retCode ==='200'){
                                console.log('测试测试测试')
                                //业务逻辑处理：
                                if(res.data.ec==='0000'){
                                    window.globalUiKit.notify("提示", "结清证明申请开具成功", "success");
                                    //调用 关闭 方法，返回查询页面，清空申请表单
                                    this.shut()
                                    //查询页面重新调用查询方法（没有提供，先不调用了）
                                    //this.queryInfo()
                                }else{
                                    window.globalUiKit.notify("提示", "结清证明申请开具未成功，请联系管理员。", "error");
                                }
                            }else{
                                window.globalUiKit.notify("提示", "结清证明申请开具未成功，请联系管理员", "error");
                            }
                        }).catch(err => {
                            console.log(err);
                        });
                } else {
                    console.log('有必填项没有填写');
                    return false;
                }
            });


        },
        //结清证明申请 关闭页面
        shut(){
            //隐藏申请页面，展示查询页面
            this.show2 = false
            this.show1 = true
            this.objForm_apply = {}
        },



      }



    }
  </script>

  <style scoped>

    .settlementCertificate .el-form-item{
      width: 282.5px;
    }

    .settlementCertificateApply .el-divider{
        margin-top: 22px;
    }
    .settlementCertificateApply .el-col{
        margin-top: 10px;

    }



  </style>
